<template>
  <div class="classification">
    <header>
      <van-icon name="cross" size=".56rem" @click="toSociety"/>
    </header>
    <div class="sort">
      <div class="sortheader">
        <div>排序</div>
        <a class="edit" @click="finish">完成</a>
      </div>
      <div class="list_title">
        <div>
          <div class="left">板块内容将根据下面排列先后排序</div>
          <div class="up">向上</div>
          <div class="down">向下</div>
        </div>
        <div v-for="(item, index) in classList" :key="index">
          <div class="left class_name">{{item.name}}</div>
          <div class="up" @click="up(index)" v-if="item.id !== 0"><van-icon :name="$img('up.png')" size=".48rem"/></div>
          <div class="down" @click="down(index)" v-if="item.id !== 0"><van-icon :name="$img('down.png')" size=".48rem"/></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      classList: [],
      classIdStr: ''
    }
  },
  methods: {
    toSociety () {
      this.$router.replace('/classification')
    },
    finish () {
      for (let x in this.classList) {
        this.classIdStr += `${this.classList[x].id}${parseInt(x) === this.classList.length - 1 ? '' : ','}`
      }
      this.$axios.post('/api/user/social/classify/update', {
        order_list: this.classIdStr
      }).then(res => {
        if (res.status === 200) {
          this.toSociety()
        }
      })
    },
    up (index) {
      this.zIndexUp(index)
    },
    down (index) {
      this.zIndexDown(index)
    },
    swapArray (arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
      return arr
    },
    zIndexDown (index) { // 下移
      if (index + 1 !== this.classList.length) {
        this.classList = this.swapArray(this.classList, index, index + 1)
      } else {
        this.$dialog({ message: '已经处于置底，无法下移' })
        return false
      }
    },
    zIndexUp (index) { // 上移
      if (index > 3) {
        this.classList = this.swapArray(this.classList, index, index - 1)
      } else {
        this.$dialog({ message: '已经处于置顶，无法上移' })
        return false
      }
    },
    getClassifyList () {
      this.$axios.get('/api/classify/list').then(res => {
        this.classList = res.data.userFocus
      })
    }
  },
  created () {
    this.getClassifyList()
  }
}
</script>

<style lang="scss">
.classification{
  header{
    padding: .26rem .26rem .34rem;
    display: flex;
  }
  .sort{
    .sortheader{
      display: flex;
      align-items: flex-end;
      padding: 0 .16rem 0 .2rem;
      justify-content: space-between;
      div{
        color: #333333;
        font-size: .32rem;
        font-weight: bold;
        margin-right: .12rem;
      }
      .edit{
        border: #ff2a1f solid .02rem;
        width: .96rem;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: .48rem;
        font-size: .24rem;
        color: #ff2a1f;
        background: #ffffff;
        border-radius: .24rem;
      }
      .sort{
        margin-right: .16rem;
      }
    }
    .list_title{
      color: #cccccc;
      font-size: .24rem;
      padding: .24rem .26rem .2rem .2rem;
      &>div{
       display: flex;
       border-bottom: .02rem solid #f6f6f6;
       padding-bottom: .24rem;
       padding-top: .24rem;
       align-items: center;
        .up, .down{
          width: .48rem;
          height: .48rem;
          margin-left: .58rem;
          flex: 0 1 auto;
        }
        .left{
          flex: 1;
        }
        .class_name{
          font-size: .28rem;
          color: #333333;
        }
      }
      &>div:first-child{
        padding-bottom: 0;
        border-bottom: unset;
      }
    }
  }
}
</style>
